<script setup>
import ContactUs from './components/ContactUs.vue'
import UserInfoPanel from './components/UserInfo/index.vue'
// import CloudSaves from './components/CloudSaves/index.vue'
import Games from './components/Games/index.vue'
import { useAppStore } from './store';
import { getCurrentInstance } from 'vue';
import ShortcutsPanel from './components/Shortcuts/index.vue';
import NewsPanel from './components/News/index.vue';

const appStore = useAppStore();

appStore.installAppStore(getCurrentInstance().appContext);

</script>

<template>
  <div class="bbk-app">
    <div class="bbk-header">
      <h1>续缘大世界，你的BBK游戏中心</h1>
    </div>
    <div class="bbk-main">
      <div class="bbk-main-right-part">
        <UserInfoPanel />
        <ContactUs />
      </div>
      <div class="bbk-main-left-part">
        <!-- <CloudSaves /> -->
        <div class="bbk-main-left-part__row">
          <Games />
          <ShortcutsPanel />
        </div>
        <div class="bbk-main-left-part__row">
          <NewsPanel />
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less">
.bbk-app {
  max-width: 960px;
  margin: auto;
}
.bbk-header {
  padding: 20px 0;
  h1 {
    font-size: 20px;
  }
}
.bbk-main {
  display: flex;
  gap: 16px;
  &-right-part {
    width: 200px;
    flex-grow: 0;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  &-left-part {
    display: flex;
    flex-direction: column;
    gap: 16px;
    &__row {
      display: flex;
      flex-direction: row;
      gap: 16px;
    }
  }
}
</style>
